<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="css/index.css">
    <title>首页</title>
</head>
<body id="body">
<div id='preloader' >
    <div class='loader'></div>
    <div class='left' ></div>
    <div class='right' ></div>
</div>
<div class="public">
    <div style="padding:0;margin:0;">
        <!--头部-->
        <div class="container-fluid hhd">
            <div class="row">
                <div class="container">
                    <div class="col-lg-12 intro">
                        <h1 >Hello, I'm Zeihang</h1>
                        <p>前端工程师</p>
                        <button class="btn btn-default btn-lg btnAbout">About Me</button>
                        <button class="btn btn-default btn-lg btnProject">My project</button>
                    </div>
                </div>
            </div>
        </div>
        <!--导航区-->
        <div class="container-fluid" style="padding:0;">
            <div class="zhanwei">
                <div class="xxxxxx" >
                    <div class="row rownav">
                        <div class="container">
                            <nav class="navbar navbar-default navbarcolor" role="navigation">
                                <!-- Brand and toggle get grouped for better mobile display -->
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="#">Zeihang</a>
                                </div>
                                <!-- Collect the nav links, forms, and other content for toggling -->
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul class="nav navbar-nav navbar-right">
                                        <li><a class="navBar">about</a></li>
                                        <li><a class="navBar">project</a></li>
                                        <li><a class="navBar">skills</a></li>
                                        <li><a class="navBar">resume</a></li>
                                        <li><a class="navBar">contact</a></li>
                                    </ul>
                                </div><!-- /.navbar-collapse -->
                            </nav>
                        </div>
                    </div></div>
            </div>
        </div>
        <!--about区-->
        <div class="container about">
            <div class="row" style="width:100%;padding:0 2.5%;margin:0;">
                <div class="text-center col-md-8 col-md-offset-2" >
                    <div style="margin-bottom: 50px;">
                        <h2 >ABOUT ME</h2>
                        <div class="h2bjt"></div>
                    </div>
                    <img src="img/about.jpg" alt="" class="img-responsive">
                    <p class="text-left" style="text-align: center;">虽天资不足，然勤奋有余，没有传奇的履历，也没有惊人天赋，只有对自由渴望。 </p>
                </div>
            </div>
        </div>
        <!--Myportfolio-->
        <div class="container portfolio">
            <div class="row" style="width:100%;">
                <div class="text-center ">
                    <div style="margin-bottom: 50px;">
                        <h2 >MY PROJECT</h2>
                        <div class="h2bjt"></div>
                        <p style="margin-top:10px;">我之前做过的一些项目或小作品</p>
                        <ul class="ulnav" >
                            <li><a href="http://super.zeihang.wang">燚商城<span>|</span></a></li>
                            <li><a href="http://360.soqi.cn">企+<span>|</span></a></li>
                            <li><a href="http://zeihang.gitee.io/homebody">宅文化 webApp</a><span>|</span></li>
                            <li><a href="http://super.zeihang.wang">稻香村</a></li>
                        </ul>
                        <div class="col-lg-12">
                            <div class="col-lg-3 col-md-4 col-sm-6">
                                <div class="piclist">       <!--再套个盒子来承受col带了的内填充，这样就不会让a标签过大；-->
                                    <a href="http://super.zeihang.wang">
                                        <div class="a">
                                            <h5 >燚商城</h5>
                                            <p>Web Design</p>
                                            <span class="glyphicon glyphicon-search" style="color:orange;"></span>
                                        </div>
                                        <img src="img/portfolio/01.jpg" alt="" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4 col-sm-6">
                                <div class="piclist">       <!--再套个盒子来承受col带了的内填充，这样就不会让a标签过大；-->
                                    <a href="http://zeihang.gitee.io/homebody">
                                        <div class="a">
                                            <h5 >宅文化</h5>
                                            <p>App Development</p>
                                            <span class="glyphicon glyphicon-search" style="color:orange;"></span>
                                        </div>
                                        <img src="img/portfolio/333.png" alt="" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4 col-sm-6">
                                <div class="piclist">       <!--再套个盒子来承受col带了的内填充，这样就不会让a标签过大；-->
                                    <a href="http://360.soqi.cn">
                                        <div class="a">
                                            <h5 >企+</h5>
                                            <p>Web Design</p>
                                            <span class="glyphicon glyphicon-search" style="color:orange;"></span>
                                        </div>
                                        <img src="img/portfolio/111.png" alt="" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4 col-sm-6">
                                <div class="piclist">       <!--再套个盒子来承受col带了的内填充，这样就不会让a标签过大；-->
                                    <a href="http://zeihang.gitee.io/rice">
                                        <div class="a">
                                            <h5 >稻香村</h5>
                                            <p>Web Design</p>
                                            <span class="glyphicon glyphicon-search" style="color:orange;"></span>
                                        </div>
                                        <img src="img/portfolio/222.png" alt="" class="img-responsive">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Myskills区-->
        <div class="container-fluid skills">
            <div class="container">
                <div class="row">
                    <div class="text-center">
                        <div style="margin-bottom: 50px;">
                            <h2 >MY SKILLS</h2>
                            <div class="h2bjt"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-2 text-right">
                        <p style="font-size:16px;font-weight: bold;color:orange;">HTML5、CSS3</p>
                    </div>
                    <div class="col-lg-10">
                        <div class="progress progress-striped  active">
                            <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
                                <span class="sr-only">45% Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-2 text-right">
                        <p style="font-size:16px;font-weight: bold;color:orange;">jQuery、BootStrap</p>
                    </div>
                    <div class="col-lg-10">
                        <div class="progress progress-striped active">
                            <div class="progress-bar  progress-bar-info"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                <span class="sr-only">45% Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-2 text-right">
                        <p style="font-size:16px;font-weight: bold;color:orange;">Vue、webpack</p>
                    </div>
                    <div class="col-lg-10">
                        <div class="progress progress-striped active">
                            <div class="progress-bar  progress-bar-warning"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                <span class="sr-only">45% Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-2 text-right">
                        <p style="font-size:16px;font-weight: bold;color:orange;">node.js、express</p>
                    </div>
                    <div class="col-lg-10">
                        <div class="progress progress-striped active">
                            <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 70%;background-color: purple;">
                                <span class="sr-only">45% Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-2 text-right">
                        <p style="font-size:16px;font-weight: bold;color:orange;">mongoDB</p>
                    </div>
                    <div class="col-lg-10">
                        <div class="progress progress-striped active">
                            <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 70%;background-color: black;">
                                <span class="sr-only">45% Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-2 text-right">
                        <p style="font-size:16px;font-weight: bold;color:orange;">linux、nginx</p>
                    </div>
                    <div class="col-lg-10">
                        <div class="progress progress-striped active">
                            <div class="progress-bar progress-bar-danger"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                <span class="sr-only">45% Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--experience和education区-->
        <div class="container-fluid resume">
            <div class="container">
                <div class="row">
                    <div class="text-center">
                        <div style="margin-bottom: 50px;">
                            <h2 >WOEK EXPERIENCE</h2>
                            <div class="h2bjt"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <ul>
                        <li >
                            <div class="text-center circle" ><h4>2016.4<br/>-<br/>2016.7</h4></div>
                            <div class="tt eh4 text-right">
                                <h4>北京慧摩尔科技有限公司  </h4>
                                <h4 class="subheading">网页制作</h4>
                                <p>使用ps切图,负责静态页面的编写</p>
                                <p></p>
                            </div>
                        </li>
                        <li >
                            <div class="text-center circle" ><h4>2016.8<br/>-<br/>2017.9</h4></div>
                            <div class="tt eh4 text-left" >
                                <h4>搜企网络公司</h4>
                                <h4 class="subheading">web前端工程师</h4>
                                <p>1、负责前端页面的编写与维护</p>
                                <p>2、负责各种名片与微单页模板的编写</p>
                                <p>3、负责与后端人员的数据交互</p>
                            </div>
                        </li>
                        <li >
                            <div class="text-center circle" ><h4>2017.9<br/>-<br/>2017.10</h4></div>
                            <div class="tt eh4 text-right">
                                <h4>帮助好友</h4>
                                <h4 class="subheading">偷当了一回全栈</h4>
                                <p>使用vue实现前端页面与组件化，用expess与mongoDB搭建服务器与数据库，用nginx来跨域请求数据，在linux系统的云服务器上部署。</p>
                            </div>
                        </li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--contact区-->
        <div class="container-fluid contact">
            <div class="container">
                <div>
                    <div class="text-center">
                        <div style="margin-bottom: 50px;">
                            <h2>CONTACT ME</h2>
                            <div class="h2bjt"></div>
                        </div>
                        <div class="row" style="padding:0 10%;margin: 30px 0;">
                            <div class="col-lg-4 col-md-4">
                                <span class="fa fa-map-marker" style="font-size:30px;"></span><br/>
                                <p>厦门市湖里区<br/>裕兴大厦</p>
                            </div>
                            <div class="col-lg-4 col-md-4">
                                <span class="glyphicon glyphicon-envelope" style="font-size:30px;"></span><br/>
                                <p>zeihang@sina.com</p>
                            </div>
                            <div class="col-lg-4 col-md-4">
                                <span class="glyphicon glyphicon-earphone" style="font-size:30px;"></span><br/>
                                <p>17805985051</p>
                            </div>
                        </div>
                        <h4>LEAVE ME A MESSAGE</h4>
                        <div class="row" style="padding:0 20%;">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <div class="col-sm-6" style="margin-bottom: 10px;">
                                        <input type="text" class="form-control" id="inputEmail2" placeholder="Name">
                                    </div>
                                    <div class="col-sm-6" style="margin-bottom: 10px;">
                                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <textarea class="form-control" rows="4" placeholder="Message" style="resize: none;"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-default btn-lg" >Send Message</button>
                                </div>
                            </form>
                        </div>
                        <div class="social">
                            <ul>
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                <li><a href="#"><i class="fa fa-github"></i></a></li>
                                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/1.5.0/velocity.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
